/*
 * Copyright (c) 2023 MariaDB plc
 *
 * Use of this software is governed by the Business Source License included
 * in the LICENSE.TXT file and at www.mariadb.com/bsl11.
 *
 * Change Date: 2028-05-14
 *
 * On the date above, in accordance with the Business Source License, use
 * of this software will be governed by version 2 or later of the General
 * Public License.
 */

.v-input {
  &__details {
    padding-inline: 0px !important;
    .v-messages__message::first-letter {
      text-transform: uppercase;
    }
  }
  &--disabled {
    opacity: 0.5;
  }
  &--density-compact {
    --v-input-control-height: 28px !important;
    --v-input-padding-top: 0px !important;
  }
  &--density-comfortable {
    --v-input-control-height: 36px !important;
    --v-input-padding-top: 0px !important;
  }
  &--density-default {
    --v-input-control-height: 40px !important;
    --v-input-padding-top: 0px !important;
  }
}

.v-field {
  --v-field-padding-top: 0px !important;
  --v-field-padding-bottom: 0px !important;
  &__input {
    font-size: 0.875rem;
    padding: 0 12px;
    color: colors.$navigation;
  }
  &__outline {
    --v-field-border-width: thin !important;
    &__start,
    &__end {
      opacity: 1 !important;
    }
  }
  &__clearable {
    .v-icon {
      opacity: 1 !important;
      color: colors.$error;
    }
    &:hover {
      opacity: 1;
    }
  }
  .v-text-field__suffix__text {
    font-size: 0.75rem;
    color: colors.$navigation;
  }
  &.v-field--focused {
    /**
       * Change color on focused.
       * Error state color applies to icon
       * by vuetify would override this
       */
    .v-field__prepend-inner,
    .v-field__append-inner {
      color: colors.$primary;
    }
  }
}

.v-select,
.v-combobox {
  .v-field {
    &__input {
      input {
        align-self: center !important;
      }
    }
  }
  &--active-menu {
    .v-field__outline {
      &__start {
        border-bottom-left-radius: 0px;
        border-bottom-color: colors.$separator;
      }
      &__end {
        border-bottom-right-radius: 0px;
        border-bottom-color: colors.$separator;
      }
    }
  }
}

.v-list {
  box-shadow: none !important;
  .v-list-item {
    min-height: 36px !important;
    letter-spacing: 0;
    display: flex;
    align-items: center;
    .v-list-item__content {
      width: 100%;
    }
    &:not(.v-list-item--active, .v-list-item--disabled) {
      color: colors.$navigation !important;
    }
    .v-list-item-title {
      display: flex;
      align-items: center;
      font-weight: 400 !important;
      font-size: 0.875rem !important;
    }
    .v-list-item-title__action {
      margin: 0px 0;
      margin-right: 12px !important;
      .v-simple-checkbox {
        line-height: 10px;
      }
    }
    .v-list-item-title--disabled {
      i,
      svg {
        color: rgba(0, 0, 0, 0.26) !important;
      }
      .v-list-item__title {
        color: rgba(0, 0, 0, 0.26) !important;
      }
    }
  }
}

.v-menu {
  .v-select__content {
    .v-list .v-list-item {
      padding-inline: 12px !important;
    }
  }
  .v-overlay__content {
    box-shadow: none;
    border: thin solid colors.$text-subtle;
    border-top: 0;
    border-radius: 0 0 4px 4px;
    &.full-border {
      border-top: thin solid colors.$text-subtle !important;
    }
    &.border--none {
      margin-top: 0px !important;
    }
    &.with-shadow-border--none {
      border: none !important;
      box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1) !important;
    }
    &.with-arrow {
      contain: initial;
      overflow: visible;
      &:after {
        border: solid transparent;
        content: '';
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-top-color: white;
        border-width: 8px;
        border-top-width: 8px;
      }
      &::before {
        content: '';
        background: rgba(255, 255, 255, 0);
        position: absolute;
        width: 18px;
        height: 18px;
        z-index: -1;
        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.4);
      }
      &--top-left {
        &:after {
          transform: rotate(180deg);
          bottom: 100%;
          left: 21px;
        }
        &::before {
          top: -4px;
          left: 20px;
          transform: rotate(45deg);
        }
      }
      &--top-right {
        &:after {
          transform: rotate(180deg);
          bottom: 100%;
          right: 21px;
        }
        &::before {
          top: -4px;
          right: 20px;
          transform: rotate(45deg);
        }
      }
    }
  }
}

.v-textarea {
  .v-field__input {
    padding: 4px 12px;
  }
}

.v-checkbox-btn,
.v-switch {
  .v-label {
    opacity: 1;
    color: colors.$small-text;
    line-height: var(--v-input-control-height);
  }
  .v-selection-control__input:hover::before {
    opacity: 0.2;
  }
}

.v-checkbox-btn.v-selection-control--density-comfortable > .v-label,
.v-switch .v-selection-control--density-comfortable > .v-label {
  font-size: 0.875rem;
}

.v-checkbox-btn.v-selection-control--density-compact {
  --v-selection-control-size: 28px;
  i {
    font-size: 1.125rem;
  }
  .v-label {
    font-size: 0.75rem;
  }
}

.v-tabs {
  .v-tab {
    font-weight: normal;
    text-transform: capitalize;
  }
  .v-slide-group__container {
    border-bottom: thin solid colors.$table-border;
  }
  .v-tab__slider {
    height: 3.5px;
    color: colors.$primary;
  }
  &.v-tabs--vert {
    .v-slide-group__container {
      border-bottom: none;
    }
    .v-tab {
      &:hover {
        background: #eefafd;
      }
      &.v-tab--selected {
        .tab-name {
          background-color: colors.$separator;
          color: colors.$blue-azure;
          border-radius: 8px;
        }
      }
    }
  }
}

.v-table {
  &--density-compact {
    --v-table-header-height: 30px;
    --v-table-row-height: 30px;
  }
  &--density-comfortable {
    --v-table-header-height: 40px;
    --v-table-row-height: 45px;
  }
  &--density-default {
    --v-table-header-height: 45px;
    --v-table-row-height: 50px;
  }
  thead {
    tr {
      box-shadow: -7px 5px 7px -7px rgba(0, 0, 0, 0.1);
      th {
        background-color: colors.$table-border !important;
        border-bottom: none !important;
        color: colors.$small-text !important;
        text-transform: uppercase;
        font-size: 11px;
        white-space: nowrap;
        box-shadow: none !important;
        font-weight: bold !important;
        &:first-child {
          border-radius: 5px 0 0 0;
        }
        &:last-child {
          border-radius: 0 5px 0 0;
        }
        .v-data-table-header__sort-icon {
          margin-bottom: 3px;
          margin-left: 16px;
          font-size: 14px;
        }
        &.v-data-table__th--sorted {
          color: black !important;
          .v-data-table-header__sort-icon {
            color: black;
          }
        }
      }
    }
  }
  tbody {
    tr {
      &:hover {
        background: colors.$tr-hovered-color !important;
      }
      &:active,
      &.v-data-table__selected {
        background: colors.$selected-tr-color !important;
      }
      td {
        cursor: text;
        border-bottom: vuetifyVar.$table-border;
        &:first-child {
          border-left: vuetifyVar.$table-border;
        }
        &:last-child {
          border-right: vuetifyVar.$table-border;
        }
      }
    }
  }
}

.v-icon {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.v-card:focus {
  outline: none;
}
//VSelectionControl
.v-selection-control__input > .v-icon {
  opacity: 1;
}
